<template>
  <el-row class="ProgressList-box">
    <el-card>
      <div slot="header" class="clearfix ProgressList-head">
        <span class="el-card-header">审批记录</span>
      </div>
      <el-col :span="24" class="list">
        <div v-if="task.taskStatus!==0" v-for="task in taskList" :key="task.taskName" class="">
          <div class="timeline-title">
            <i class="el-icon-printer"></i>
            <small>{{task.taskName}}</small>
            <span></span>
          </div>
          <div class="taskList_box">
            <div class="taskList_box_item">
              <div class="timeline-list">
                <div class="listFistSmall">审核结果:</div>
                <div class="listFistLr">{{task.taskStatus | mapLabel('taskStatus')}}</div>
              </div>
              <div class="timeline-list">
                <div class="listFistSmall">审核意见:</div>
                <div class="listFistLr overflowEllipsis" v-if="task.comment">{{task.comment}}</div>
              </div>
              <div class="timeline-list">
                <div class="listFistSmall">部门:</div>
                <div class="listFistLr overflowEllipsis">{{task.deptName}}</div>
              </div>
            </div>
            <div class="taskList_box_item">
              <div class="timeline-list">
                <div class="listFistSmall">主要负责人:</div>
                <div class="listFistLr">{{task.nickName}}</div>
              </div>
              <div class="timeline-list">
                <div class="listFistSmall">联系电话:</div>
                <div class="listFistLr">{{task.phone}}</div>
              </div>
              <div class="timeline-list">
                <div class="listFistSmall">审批时间:</div>
                <div class="listFistLr" v-if="task.time">{{task.time | parseTime('{y}-{m}-{d} {h}:{i}')}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-card>
  </el-row>
</template>
<script>
  import { queryTaskHistory } from "@/api/approval";

  export default {
    data() {
      return {
        taskList: []
      };
    },
    components: {},
    created() {
      this.getTaskList();
    },
    props: ["approvalId"],
    methods: {
      getTaskList() {
        queryTaskHistory(this.approvalId).then(res => {
          this.taskList = res.data;
          this.taskList.forEach(e => {
            this.lastTask = e.lastTask;
          });
        });
      }
    }
  };
</script>
<style scoped>
  .ProgressList_look {
    position: absolute;
    top: 15px;
    right: 50px;
    min-width: 100px;
    height: 50px;
  }

  .ProgressList-head {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .timeline-title {
    height: 50px;
    display: flex;
    align-items: center;
    color: #409eff;
    width: 100%;
    overflow: hidden;
    padding-left: 85px;
    font-size: 21px;
    position: relative;
  }

  .timeline-title small {
    position: relative;
    display: block;
    height: 50px;
    min-width: 80px;
    max-width: 65%;
    padding-right: 35px;
    background-color: #fff;
    z-index: 1000;
    overflow: hidden;
    line-height: 50px;
  }

  .timeline-title span {
    display: block;
    height: 50px;
    width: 70%;
    display: flex;
    align-items: center;
  }

  .timeline-title::after {
    position: absolute;
    width: 60px;
    left: 0;
    height: 1px;
    background-color: #409eff;
    content: "";
  }

  .timeline-title span::before {
    position: absolute;
    width: 90%;
    right: 0;
    height: 1px;
    background-color: #409eff;
    content: "";
  }

  .timeline-title .el-icon-printer {
    font-size: 20px;
    margin-right: 5px;
  }

  .listFistLr {
    margin-left: 10px;
    color: #909399;
    font-size: 15px;
    /* width: 180px; */
    min-width: 110px;
    overflow: hidden;
    height: 22px;
    line-height: 22px;
    max-width: 180px;

  }

  .timeline-list .listFistSmall {
    font-size: 15px;
    color: #333;
    text-align: right;
    width: 90px;
  }

  .timeline-list {
    height: 22px;
    display: flex;
    align-items: center;
    line-height: 22px;
    font-size: 15px;
    color: #909399;
    margin-bottom: 10px;
    width: 33.3333333%;
  }

  .taskList_box_item {
    display: flex;
    width: 100%;
    justify-content: space-around;
  }

  .taskList_box {
    margin-top: 15px;
    overflow: hidden;
  }

  .list {
    margin-bottom: 20px;
  }

  .ProgressList-box {
    margin-bottom: 50px;
    position: relative;
  }

  .el-card-header {
    font-size: 20px !important;
    color: #3ba4f5 !important;
    padding-left: 20px;
    cursor: pointer;
  }
</style>